<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
    </head>

    <body>
        <div class="x-body" id="app">
            <xblock class="layui-form">
                <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量移除</button>
                <button class="layui-btn" onclick="open_addExamStudent()"><i class="layui-icon"></i>添加考试学生</button>
                <button class="layui-btn layui-btn-normal" onclick="autoSeatNumber()"><i class="layui-icon"></i>自动排号</button>
                <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);"
                 title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
                <span class="x-right" style="line-height:40px">共有数据：{{ examStudents.length }} 条</span>
                <input type="hidden" name="courseNo" th:attr="value=${schExam.courseNo}"/>
                <input type="hidden" name="schExamId" th:attr="value=${schExam.id}"/>
                <input type="hidden" name="roomName" th:attr="value=${schExam.roomName}"/>
            </xblock>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th width="20">
                            <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
                        </th>
                        <th>学号</th>
                        <th>学生姓名</th>
                        <th>考试日期</th>
                        <th>考试时间</th>
                        <th>监考教室</th>
                        <th>座位号</th>
                        <th width="100">操作</th>
                </thead>
                <tbody>
                    <tr v-for="examStudent in examStudents">
                        <td>
                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary" :data-id='examStudent.id' :data-stuName="examStudent.stuName"><i class="layui-icon">&#xe605;</i></div>
                        </td>
                        <td>{{ examStudent.stuNo }}</td>
                        <td>{{ examStudent.stuName }}</td>
                        <td>{{ examStudent.examDate }}</td>
                        <td>{{ examStudent.examTime }}</td>
                        <td>{{ examStudent.roomName }}</td>
                        <td>{{ examStudent.seatNumber }}</td>
                        <td class="td-manage">
                            <button class="layui-btn-danger layui-btn layui-btn-sm" onclick="member_del(this)" href="javascript:;"><i
                                 class="layui-icon">&#xe640;</i>移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script type="text/javascript" src="/js/jquery.min.js"></script>
        <script type="text/javascript" src="/js/xadmin.js"></script>
        <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/js/vue.min.js"></script>
        <script type="text/javascript" src="/js/jquery.form.js"></script>
        <script>
            var vm = new Vue({
                el : '#app',
                data : {
                    // 当前考试学生列表
                    examStudents : "",
                    // 当前专业代码
                    courseNo:"",
                    // 当前考试课程id
                    schExamId : "",
                    // 当前监考教室
                    roomName: ""
                },
                created : function() {
                    this.courseNo = $("input[name='courseNo']").val();
                    this.schExamId = $("input[name='schExamId']").val();
                    this.roomName = $("input[name='roomName']").val();
                    // 获取当前教室的考试学生
                   this.listExamStudent(this.schExamId, this.roomName);
                },
                methods : {
                    listExamStudent : function(schExamId, roomName) {
                        var vm = this;
                        $.ajax({
                            url : "/sys/exam/listExamStudent",
                            data: {
                                id: schExamId,
                                roomName: roomName
                            },
                            type : "get",
                            success : function(result) {
                                if (result.state) {
                                    vm.examStudents = result.data;
                                } else {
                                    layui.use(['layer'], function(){
                                        var layer = layui.layer
                                        layer.msg(""+result.msg, {icon: 5});
                                    });
                                }
                            }
                        });
                    }
                }
            });

            // 添加考试学生
            function open_addExamStudent() {
                x_admin_show('添加考试学生','/sys/exam/toAddExamStudent?courseNo=' + vm.courseNo 
                        + "&schExamId=" + vm.schExamId + "&roomName=" + vm.roomName, 600, 400);
            }
            // 自动排号
            function autoSeatNumber() {
                layer.confirm('确认要进行自动排号吗？', function(index) {
                    $.ajax({
                        url : "/sys/exam/autoSeatNumber",
                        type : "post",
                        data: {
                            examId: vm.schExamId,
                            roomName: vm.roomName
                        },
                        success : function(result) {
                            if (result.state) {
                                layer.msg('自动排号成功!', {
                                    icon: 1,
                                    time: 1000
                                });
                                vm.listExamStudent(vm.schExamId, vm.roomName);
                            } else {
                                layer.msg("" + result.msg, {
                                    icon: 5
                                });
                            }
                        }
                    });
                });
                
            }
            
            // 单个删除
            function member_del(obj, id) {
                var stuName = $(obj).parents("tr").find("div:first").attr("data-stuName");
                var id = $(obj).parents("tr").find("div:first").attr("data-id");
                var examStudentIds = [];
                examStudentIds.push(id);
                layer.confirm('确认要删除【' + stuName + '】吗？', function(index) {
                    $.ajax({
                        url: "/sys/exam/delExamStudent",
                        type: "post",
                        data: {
                            examStudentIds: examStudentIds
                        },
                        success: function(result) {
                            if (result.state) {
                                layer.msg('删除成功!', {
                                    icon: 1,
                                    time: 1000
                                });
                                 vm.listExamStudent(vm.schExamId, vm.roomName);
                            } else {
                                layer.msg("" + result.msg, {
                                    icon: 5
                                });
                            }
                        }
                    });
                });
            }

            // 批量删除
            function delAll(argument) {
                var examStudentIds = tableCheck.getData();
                if (examStudentIds.length <= 0) {
                    return;
                }
                // 获取选中的课程名称
                var obj = $(".layui-form-checked").not('.header');
                var stuName = [];
                obj.each(function(index, el) {
                    stuName.push(obj.eq(index).attr('data-stuName'));
                });
                layer.confirm('确认要删除【' + stuName + '】吗？', function(index) {
                    $.ajax({
                        url: "/sys/exam/delExamStudent",
                        type: "post",
                        data: {
                            examStudentIds: examStudentIds
                        },
                        success: function(result) {
                            if (result.state) {
                                layer.msg('删除成功', {
                                    icon: 1
                                });
                                // 移除所有checkbox的勾选状态
                                $(".layui-form-checkbox").removeClass('layui-form-checked');
                                vm.listExamStudent(vm.schExamId, vm.roomName);
                            } else {
                                layer.msg("" + result.msg, {
                                    icon: 5
                                });
                            }
                        }
                    });
                });
            }
        </script>
    </body>

</html>
